<!DOCTYPE HTML>
<html>
<head>
<title>Style Blog a Blogging Category Flat Bootstrap Responsive Website Template | Codes :: 网站模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Style Blog Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="applijewelleryion/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel='stylesheet' type='text/css' />	
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="header" id="ban">
		<div class="container">
			<div class="head-left">
				<div class="header-search">
						<div class="search">
							<input class="search_box" type="checkbox" id="search_box">
							<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
							<div class="search_form">
								<form action="#" method="post">
									<input type="text" name="Search" placeholder="Search...">
									<input type="submit" value="Send">
								</form>
							</div>
						</div>
				</div>
			</div>
			<div class="header_right">
			<nav class="navbar navbar-default">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
					<nav class="link-effect-7" id="link-effect-7">
						<ul class="nav navbar-nav">
							<li><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="features.html">Features</a></li>
							<li><a href="travel.html">Travel</a></li>
							<li><a href="fashion.html">Fashion</a></li>
							<li><a href="music.html">Music</a></li>
							<li class="active act"><a href="codes.html">Codes</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
			</div>
			<div class="nav navbar-nav navbar-right social-icons wow fadeInRight animated animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInRight;">
					<ul>
						<li><a href="#"> </a></li>
						<li><a href="#" class="pin"> </a></li>
						<li><a href="#" class="in"> </a></li>
						<li><a href="#" class="be"> </a></li>
						
						<li><a href="#" class="vimeo"> </a></li>
					</ul>
				</div>
			<div class="clearfix"> </div>	
		</div>
	</div>
	<!--start-main-->
	<div class="header-bottom">
		<div class="container">
			<div class="logo">
				<h1><a href="index.html">STYLE BLOG</a></h1>
				<p><label class="of"></label>LET'S MAKE A PERFECT STYLE<label class="on"></label></p>
			</div>
		</div>
	</div>
<!-- banner -->

<div class="banner-1">

</div>

	<!-- technology-left -->
	<div class="technology">
	<div class="container">
		<div class="col-md-9 technology-left">
			<div class="page">
			
				<div class="short-heading">
				<h2 class="w3">SHORT CODES</h2>
				</div>
				<!--button-->
				<div class="grid_3 grid_4">
					<div class="page-header">
				<h3>Headings</h3>
			  </div>
		  
				  <div class="bs-example animated wow fadeInDown" data-wow-duration="1000ms">
					<table class="table">
					  <tbody>
						<tr>
						  <td><h1 id="h1-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td>
						  <td class="type-info">Semibold 36px</td>
						</tr>
						<tr>
						  <td><h2 id="h2-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td>
						  <td class="type-info">Semibold 30px</td>
						</tr>
						<tr>
						  <td><h3 id="h3-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
						  <td class="type-info">Semibold 24px</td>
						</tr>
						<tr>
						  <td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td>
						  <td class="type-info">Semibold 18px</td>
						</tr>
						<tr>
						  <td><h5 id="h5-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td>
						  <td class="type-info">Semibold 14px</td>
						</tr>
						<tr>
						  <td><h6 id="h6-bootstrap-heading">h6. Bootstrap heading</h6></td>
						  <td class="type-info">Semibold 12px</td>
						</tr>
					  </tbody>
					</table>
					</div>
				  </div>
				 
		  <!--buttons-->
				<div class="page-header animated wow fadeInUp" data-wow-duration="1000ms">
					<h3>Buttons</h3>
				  </div>
				  <p class="grid1">
					<button type="button" class="btn btn-lg btn-default">Default</button>
					<button type="button" class="btn btn-lg btn-primary">Primary</button>
					<button type="button" class="btn btn-lg btn-success">Success</button>
					<button type="button" class="btn btn-lg btn-info">Info</button>
					<button type="button" class="btn btn-lg btn-warning">Warning</button>
					<button type="button" class="btn btn-lg btn-danger">Danger</button>
					<button type="button" class="btn btn-lg btn-link">Link</button>
				  </p>
				  <p class="grid1 ">
					<button type="button" class="btn btn-1 btn-default">Default</button>
					<button type="button" class="btn btn-1 btn-primary">Primary</button>
					<button type="button" class="btn btn-1 btn-success">Success</button>
					<button type="button" class="btn btn-1 btn-info">Info</button>
					<button type="button" class="btn btn-1 btn-warning">Warning</button>
					<button type="button" class="btn btn-1 btn-danger">Danger</button>
					<button type="button" class="btn btn-1 btn-link">Link</button>
				  </p>
				  <p class="grid1">
					<button type="button" class="btn btn-sm btn-default">Default</button>
					<button type="button" class="btn btn-sm btn-primary">Primary</button>
					<button type="button" class="btn btn-sm btn-success">Success</button>
					<button type="button" class="btn btn-sm btn-info">Info</button>
					<button type="button" class="btn btn-sm btn-warning">Warning</button>
					<button type="button" class="btn btn-sm btn-danger">Danger</button>
					<button type="button" class="btn btn-sm btn-link">Link</button>
				  </p>
				  <p class="grid1">
					<button type="button" class="btn btn-xs btn-default">Default</button>
					<button type="button" class="btn btn-xs btn-primary">Primary</button>
					<button type="button" class="btn btn-xs btn-success">Success</button>
					<button type="button" class="btn btn-xs btn-info">Info</button>
					<button type="button" class="btn btn-xs btn-warning">Warning</button>
					<button type="button" class="btn btn-xs btn-danger">Danger</button>
					<button type="button" class="btn btn-xs btn-link">Link</button>
				  </p>
				  <!--//button-->
			  <!--bages-->
			  
			  <div class="page-header ">
				<h3>Badges</h3>
			  </div>
			  <p>
				<a href="#">Inbox <span class="badge">42</span></a>
			  </p>
			  <ul class="nav nav-pills animated wow fadeInLeft" data-wow-duration="1000ms" role="tablist">
				<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
				<li role="presentation"><a href="#">Profile</a></li>
				<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
			  </ul>
			   <!--//bages-->
			   <!--alerts-->
			   <div class="page-header animated wow fadeInLeft" data-wow-duration="1000ms">
				<h3>Alerts</h3>
			  </div>
			  <div class="alert alert-success" role="alert">
				<strong>Well done!</strong> You successfully read this important alert message.
			  </div>
			  <div class="alert alert-info" role="alert">
				<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
			  </div>
			  <div class="alert alert-warning" role="alert">
				<strong>Warning!</strong> Best check yo self, you're not looking too good.
			  </div>
			  <div class="alert alert-danger" role="alert">
				<strong>Oh snap!</strong> Change a few things up and try submitting again.
			  </div>
			  <!--//alerts-->
				<!--nav-->
			   <div class="page-header animated wow fadeInDown" data-wow-duration="1000ms">
				<h3>Navs</h3>
				<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#">Home</a></li>
				<li role="presentation"><a href="#">Profile</a></li>
				<li role="presentation"><a href="#">Messages</a></li>
			  </ul>
			  <ul class="nav nav-pills" role="tablist">
				<li role="presentation" class="active"><a href="#">Home</a></li>
				<li role="presentation"><a href="#">Profile</a></li>
				<li role="presentation"><a href="#">Messages</a></li>
			  </ul>
			  </div>
				<!--//nav-->
			   <!--Progress bars-->
				<div class="page-header animated wow fadeInLeft" data-wow-duration="1000ms">
					<h3>Progress bars</h3>
				</div>
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete</span></div>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
					<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
					<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
				</div>
			  <!--//Progress bars-->
				<!--Panels-->
				<div class="page-header">
					<h3>Panels</h3>
				</div>
				<div class="row animated wow fadeInRight" data-wow-duration="1000ms">
					<div class="col-sm-4">
					  <div class="panel panel-default">
						<div class="panel-heading">
						  <h3 class="panel-title">Panel title</h3>
						</div>
						<div class="panel-body">
						  Panel content
						</div>
					  </div>
					  <div class="panel panel-primary">
						<div class="panel-heading">
						  <h3 class="panel-title">Panel title</h3>
						</div>
						<div class="panel-body">
						  Panel content
						</div>
					  </div>
					</div><!-- /.col-sm-4 -->
					<div class="col-sm-4">
					  <div class="panel panel-success">
						<div class="panel-heading">
						  <h3 class="panel-title">Panel title</h3>
						</div>
						<div class="panel-body">
						  Panel content
						</div>
					  </div>
					  <div class="panel panel-info">
						<div class="panel-heading">
						  <h3 class="panel-title">Panel title</h3>
						</div>
						<div class="panel-body">
						  Panel content
						</div>
					  </div>
					</div><!-- /.col-sm-4 -->
					<div class="col-sm-4">
					  <div class="panel panel-warning">
						<div class="panel-heading">
						  <h3 class="panel-title">Panel title</h3>
						</div>
						<div class="panel-body">
						  Panel content
						</div>
					  </div>
					  <div class="panel panel-danger">
						<div class="panel-heading">
						  <h3 class="panel-title">Panel title</h3>
						</div>
						<div class="panel-body">
						  Panel content
						</div>
					  </div>
					</div><!-- /.col-sm-4 -->
				</div>
			   <!--//Panels-->
				<!--labels-->
			   <div class="page-header animated wow fadeInDown" data-wow-duration="1000ms">
				<h3>Labels</h3>
			  </div>
			  <h1 class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </h1>
			  <h2 class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </h2>
			  <h3 class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </h3>
			  <h4 class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </h4>
			  <h5 class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </h5>
			  <h6 class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </h6>
			  <p class="grid2">
				<span class="label label-default">Default</span>
				<span class="label label-primary">Primary</span>
				<span class="label label-success">Success</span>
				<span class="label label-info">Info</span>
				<span class="label label-warning">Warning</span>
				<span class="label label-danger">Danger</span>
			  </p>
			   <!--//labels-->
			
			<!--table-->
			<div class="page-header">
				<h3>Tables</h3>
			 </div>
			<div class="bs-example animated wow fadeInLeft" data-wow-duration="1000ms" data-example-id="simple-table">
				<table class="table">
				  <caption>Optional table caption.</caption>
				  <thead>
					<tr>
					  <th>#</th>
					  <th>First Name</th>
					  <th>Last Name</th>
					  <th>Username</th>
					</tr>
				  </thead>
				  <tbody>
					<tr>
					  <th scope="row">1</th>
					  <td>Mark</td>
					  <td>Otto</td>
					  <td>@mdo</td>
					</tr>
					<tr>
					  <th scope="row">2</th>
					  <td>Jacob</td>
					  <td>Thornton</td>
					  <td>@fat</td>
					</tr>
					<tr>
					  <th scope="row">3</th>
					  <td>Larry</td>
					  <td>the Bird</td>
					  <td>@twitter</td>
					</tr>
				  </tbody>
				</table>
			</div><!-- /example -->
			<!--//table-->
			<!--Contextual classes-->
			<div class="page-header">
				<h3>Contextual classes</h3>
			</div>
			<div class="table-responsive">
				<table class="table table-bordered table-striped animated wow fadeInUp" data-wow-duration="1000ms">
				  <colgroup>
					<col class="col-xs-1">
					<col class="col-xs-7">
				  </colgroup>
				  <thead>
					<tr>
					  <th>Class</th>
					  <th>Description</th>
					</tr>
				  </thead>
				  <tbody>
					<tr>
					  <th scope="row">
						<code>.active</code>
					  </th>
					  <td>Applies the hover color to a particular row or cell</td>
					</tr>
					<tr>
					  <th scope="row">
						<code>.success</code>
					  </th>
					  <td>Indicates a successful or positive action</td>
					</tr>
					<tr>
					  <th scope="row">
						<code>.info</code>
					  </th>
					  <td>Indicates a neutral informative change or action</td>
					</tr>
					<tr>
					  <th scope="row">
						<code>.warning</code>
					  </th>
					  <td>Indicates a warning that might need attention</td>
					</tr>
					<tr>
					  <th scope="row">
						<code>.danger</code>
					  </th>
					  <td>Indicates a dangerous or potentially negative action</td>
					</tr>
				  </tbody>
				</table>
			</div>
			<div class="bs-example animated wow fadeInLeft" data-wow-duration="1000ms" data-example-id="contextual-table" style="border: 1px solid #eee">
				<table class="table">
				  <thead>
					<tr>
					  <th>#</th>
					  <th>Column heading</th>
					  <th>Column heading</th>
					  <th>Column heading</th>
					</tr>
				  </thead>
				  <tbody>
					<tr class="active">
					  <th scope="row">1</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr>
					  <th scope="row">2</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr class="success">
					  <th scope="row">3</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr>
					  <th scope="row">4</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr class="info">
					  <th scope="row">5</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr>
					  <th scope="row">6</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr class="warning">
					  <th scope="row">7</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr>
					  <th scope="row">8</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
					<tr class="danger">
					  <th scope="row">9</th>
					  <td>Column content</td>
					  <td>Column content</td>
					  <td>Column content</td>
					</tr>
				  </tbody>
				</table>
			</div>
			<!--//Contextual classes-->
			<!--Forms-->
			<div class="page-header">
				<h3>Forms</h3>
			</div>
				<div class="bs-example animated wow fadeInRight" data-wow-duration="1000ms" data-example-id="simple-horizontal-form">
					<form class="form-horizontal">
					  <div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
						</div>
					  </div>
					  <div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
						<div class="col-sm-10">
						  <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
						</div>
					  </div>
					  <div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
						  <div class="checkbox">
							<label>
							  <input type="checkbox"> Remember me
							</label>
						  </div>
						</div>
					  </div>
					  <div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
						  <button type="submit" class="btn btn-default">Sign in</button>
						</div>
					  </div>
					</form>
				</div>
			<div class="bs-example animated wow fadeInLeft" data-wow-duration="1000ms" data-example-id="disabled-fieldset">
				<form>
				  <fieldset disabled="">
					<div class="form-group">
					  <label for="disabledTextInput">Disabled input</label>
					  <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
					</div>
					<div class="form-group">
					  <label for="disabledSelect">Disabled select menu</label>
					  <select id="disabledSelect" class="form-control">
						<option>Disabled select</option>
					  </select>
					</div>
					<div class="checkbox">
					  <label>
						<input type="checkbox"> Can't check this
					  </label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				  </fieldset>
				</form>
			</div>
			<!--//forms-->
			
		</div>
		</div>
		<!-- technology-right -->
		<div class="col-md-3 technology-right">
				
				
				<div class="blo-top1">
							
					<div class="tech-btm">
					<div class="search-1">
							<form action="#" method="post">
								<input type="search" name="Search" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}" required="">
								<input type="submit" value=" ">
							</form>
						</div>
					<h4>Popular Posts </h4>
						<div class="blog-grids">
							<div class="blog-grid-left">
								<a href="singlepage.html"><img src="images/t2.jpg" class="img-responsive" alt=""></a>
							</div>
							<div class="blog-grid-right">
								
								<h5><a href="singlepage.html">Pellentesque dui Maecenas male</a> </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="blog-grids">
							<div class="blog-grid-left">
								<a href="singlepage.html"><img src="images/m2.jpg" class="img-responsive" alt=""></a>
							</div>
							<div class="blog-grid-right">
								
								<h5><a href="singlepage.html">Pellentesque dui Maecenas male</a> </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="blog-grids">
							<div class="blog-grid-left">
								<a href="singlepage.html"><img src="images/f2.jpg" class="img-responsive" alt=""></a>
							</div>
							<div class="blog-grid-right">
								
								<h5><a href="singlepage.html">Pellentesque dui Maecenas male</a> </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="blog-grids">
							<div class="blog-grid-left">
								<a href="singlepage.html"><img src="images/t3.jpg" class="img-responsive" alt=""></a>
							</div>
							<div class="blog-grid-right">
								
								<h5><a href="singlepage.html">Pellentesque dui Maecenas male</a> </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="blog-grids">
							<div class="blog-grid-left">
								<a href="singlepage.html"><img src="images/m3.jpg" class="img-responsive" alt=""></a>
							</div>
							<div class="blog-grid-right">
								
								<h5><a href="singlepage.html">Pellentesque dui Maecenas male</a> </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="insta">
					<h4>Instagram</h4>
						<ul>
							
							<li><a href="singlepage.html"><img src="images/t1.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/m1.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/f1.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/m2.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/f2.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/t2.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/f3.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/t3.jpg" class="img-responsive" alt=""></a></li>
							<li><a href="singlepage.html"><img src="images/m3.jpg" class="img-responsive" alt=""></a></li>
						</ul>
					</div>
					
					<p>Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scripta patrioque scribentur, at pro</p>
					<div class="twt">
					
						<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-hashtag-button twitter-hashtag-button-rendered twitter-tweet-button" title="Twitter Tweet Button" src="https://platform.twitter.com/widgets/tweet_button.b7de008f493a5185d8df1aedd62d77c6.en.html#button_hashtag=TwitterStories&amp;dnt=false&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Fp.网站模板.com%2Fdemos%2Fduplex%2Fweb%2F&amp;size=l&amp;time=1467721486626&amp;type=hashtag" style="position: static; visibility: visible; width: 166px; height: 28px;" data-hashtag="TwitterStories"></iframe>
						<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
					</div>
					</div>
					
					
					
				</div>
				
			
		</div>
		<div class="clearfix"></div>
		<!-- technology-right -->
	</div>
</div>
<div class="footer">
		<div class="container">
			<div class="col-md-4 footer-left">
				<h4>About Me</h4>
				<p>Consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod .</p>
				<img src="images/t4.jpg" class="img-responsive" alt="">
					<div class="bht1">
						<a href="singlepage.html">Read More</a>
					</div>
			</div>
			<div class="col-md-4 footer-middle">
			<h4>Latest Tweet</h4>
			<div class="mid-btm">
				<p>Sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod .</p>
				<a href="http://www.smallseashell.com/">http://www.smallseashell.com/</a>
			</div>
			
				<p>Consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod .</p>
				<a href="http://www.smallseashell.com/">http://www.smallseashell.com/</a>
		
			</div>
			<div class="col-md-4 footer-right">
				<h4>Newsletter</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
						<div class="name">
							<form action="#" method="post">
								<input type="text" placeholder="Your Name" required="">
								<input type="text" placeholder="Your Email" required="">
								<input type="submit" value="Subscribed Now">
							</form>
						
						</div>	
						
							<div class="clearfix"> </div>
					
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="copyright">
				<div class="container">
					<p>© 2016 Style Blog. All rights reserved | Powered by <a href="http://www.smallseashell.com/">网站模板</a></p>
				</div>
			</div>
</body>
</html>